<template>
  <div v-loading="loading">
    <!-- 国内疫情时事播报 -->
    <h2>国内资讯</h2>
    <div class="block">
      <el-timeline>
        <el-timeline-item color="#409eff" v-for="item in chinaNews" :key="item.id" :timestamp="item.pubDateStr"
                          placement="top">
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.summary }}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>

  </div>
</template>

<script>
import { getHotMesChinaAPI } from '@/api/index.js'
export default {
  name: 'HotMsg',
  data() {
    return {
      chinaNews: [],
      loading: true
    }
  },
  created() {
    this.initHotMsgChina()
  },
  methods: {
    // 初始化国内疫情时事播报
    async initHotMsgChina() {
      const { data: res } = await getHotMesChinaAPI()
      for (let i = 0; i < res.newslist[0].news.length; i++) {
        this.chinaNews.push(res.newslist[0].news[i])
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.block {
  width: 70vw;
  margin: 0 auto;
  padding: 20px 20px;
}
</style>
